<template>
    <view>
        <tabBar :currentIndex="1"></tabBar>
        <!-- 1、头部导航栏 -->
        <uni-status-bar></uni-status-bar>
        <view style="height: 88rpx;"></view>
        
        <!-- 搜索框 -->
        <view class="search_top">
            <uni-status-bar></uni-status-bar>
            <view class="search_box" @tap="search_click()">
                <!-- <view class="search_item">
                    <image src="../../static/icon/search@3x.png"></image>
                    <text>搜索商品</text>
                </view> -->
            </view>
        </view>
        
        <view class="classify_body">
            <!-- 2、主体信息 -->
            <!-- scroll-view可滚动的视图区域 -->        
            <!-- 左侧侧边栏 -->
            <view class="pick">
                <uni-status-bar></uni-status-bar>
                <view style="height: 88rpx;"></view>
                <scroll-view class="scroll_left" scroll-y>
                    <view v-for="(item, index) in list" :key="index" @click="selectItem(index,item.id)" :class="{active: selectIndex == index}">{{item.name}}</view>
                </scroll-view>
            </view>
            
            <!-- 右侧侧边栏 -->
            <view class="right">
                <scroll-view scroll-y="true" :style="{height: height+'px'}" @scrolltolower="reachBottom">
                    <view class="activity">
                        <view class="activity_demo" v-for="(item, index) in productList" :key="item.id" @click="toProductDetails(item.id)">
                            <view class="activity_img">
                                <image :src="item.image_url"></image>
                            </view>
                            <view class="activity_font">
                                <text>{{item.name}}</text>
                                <text class="number">积分:{{item.price}}</text>
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </view>
    </view>
</template>

<script>
    import uniStatusBar from "../../components/uni-status-bar.vue";
    export default{
        components:{
            uniStatusBar
        },
        props: {
            classifyId: Number,
        },
        data(){
            return{
                list:[],
                productList: [],
                selectIndex: 0,
                height: 400,
                params: {
                    page: 1,
                    limit: 20,
                    where: {}
                }
            }
        },
        mounted() {
            uni.showLoading({
                title: '加载中'
            });
            const query = uni.createSelectorQuery();
            query.in(this).select('.right').boundingClientRect();
            query.exec((res) => {
                this.height = uni.getSystemInfoSync().windowHeight - res[0].top - uni.upx2px(120);
            })
            this._getallcat();
        },
        methods:{
            selectItem(index,id) {
                this.selectIndex = index;
                this._getList(id);
                // this.listChild = this.list[index].child;
            },
            toProductDetails(id) {
                uni.navigateTo({
                    url:'../product/productDetails?id='+id
                })
            },
            search_click(){
                return ;
                uni.navigateTo({
                    url:'../seek/seek'
                })
            },
            // 商城分类api
            _getallcat() {
                this.$u.api.getallcat({code: '999'}).then(res => {
                    this.list = res;
                    if(this.classifyId > 0) {
                        let idx = 0;
                        this.list.forEach((item,index) => {
                            if(item.id == this.classifyId) {
                                idx = index;
                                return ;
                            }
                        })
                        this.selectItem(idx,this.classifyId);
                    } else {
                        this.selectItem(0,res[0].id);
                    }
                    uni.hideLoading();
                }).catch(err => {
                    uni.hideLoading();
                })
            },
            reachBottom() {
                this._getList();
            },
            // 精选产品api
            _getList(typeId) {
                uni.showLoading({
                    title: '加载中...'
                })
                if(!this.$u.test.isEmpty(typeId)) {
                    let where = {cat_id: typeId}
                    this.params = {
                        page: 1,
                        limit: 1000,
                        code: '999',
                        where: where,
                    }
                }
                this.$u.api.getList(this.params).then(res => {
                    if(!this.$u.test.isEmpty(typeId)) {
                        this.productList = res.list;
                    } else {
                        this.productList = this.productList.concat(res.list);
                    }
                    uni.hideLoading()
                }).catch(e => {
                    uni.hideLoading()
                })
            },
        }
    }
</script>

<style lang="scss" scoped>
    .classify_body{
        align-items: stretch; //顶部对齐
    }
    
    .uni-status-bar{
        background-color:#fff;
    }
    .search_top{
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index:999; /* 显示效果，数值越大显示越靠前*/
        background-color: #fff;
    }
    .search_box{
        width: 456rpx;
        height: 64rpx;
        // background-color: #f2f2f2;
        border-radius: 32rpx;
        display: flex;
        align-items: center;
        margin-bottom: 13rpx;
        .search_item{
            display: flex;
            width: 456rpx;
            height: 64rpx;
            border-radius: 32rpx;
            background-color: #f2f2f2;
            align-items: center;
            justify-content:center;
            flex-direction: row;//水平方式上显示
            image{
                width: 50rpx;
                height: 50rpx;
            }
            text{
                font-size: 28rpx;
                line-height: 48rpx;
                color: #999999;
            }
        }
    }
    
    .pick{
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        overflow-y: auto; //上下边缘溢出的话，则提供滚动机制
        z-index: 1; /* 设置元素的栈堆顺序(显示效果，数值越大，显示的越靠前)*/
        padding-bottom: calc(var(--window-bottom) + 70px); //内容区域距离底部的距离
    }
    .scroll_left{
        width: 200rpx;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50rpx 0rpx 0rpx 50rpx;
        view{
            width: 200rpx;
            height: 100rpx;
            line-height:100rpx;
            text-align: center;
            font-size: 28rpx;
            color: #191919;
            font-weight:bold; /* 字体加粗*/
            border-radius: 50rpx 0rpx 0rpx 50rpx;
        }
        .active {
            background-color: #ffffff;
        }
    }
    .right{
        background-color: #FFFFFF;
        // padding-bottom: calc(var(--window-bottom) + 150px); //内容区域距离底部的距离
        margin-left: 200rpx;
        flex: 1;
        display: flex;
        flex-direction:row; //水平方式上排列
        flex-wrap: wrap; //必要时换行
        .activity{
            display: flex;
            width: 100%;
            box-sizing: border-box;
            padding: 5rpx;
            flex-wrap: wrap;
            .activity_demo{
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                justify-content: center;//设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式
                width: calc(50% - 10rpx);
                margin: 5rpx;
                border: 1px solid #f2f2f2;
                border-radius:6rpx;
                padding: 10rpx 10rpx 20rpx 10rpx;
                box-sizing: border-box;
                .activity_img{
                    width: 240rpx;
                    height: 240rpx;
                    background-color: #ffffff;
                    border-radius: 4rpx;
                    box-sizing: border-box;
                    overflow:hidden;
                    align-items:center;
                    image{
                        width: 250rpx;
                        height: 192rpx;
                    }
                    
                }
                .activity_font{
                    color: #191919;
                    justify-content:center;
                    margin-top: 13rpx;
                    text{
                        width: 155rpx;
                        height: 23rpx;
                        font-size: 24rpx;
                        line-height: 24rpx;
                        color: #191919;
                        font-weight:bold; /* 字体加粗*/
                        margin: 13rpx 0 10rpx 0;
                    }
                    .number{
                        color: #ff4200;
                        display: block; //转换成块级元素显示，前后带有换行符
                    }
                }
            }
        }
    }
    
</style>
